<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisble"
    v-dialog-drag
    :close-on-click-modal="false"
    @close="restForm"
    width="800px"
  >
    <div style="display: flex;justify-content: space-between;width: 100%">
      <el-input size="medium" placeholder="请输入内容" v-model="uploadValue">
        <template slot="append">
          <el-button size="medium" @click="handleUploadWorks" v-repeatClick>选择文件..</el-button>
          <el-upload
            v-if="dialogVisble"
            ref="upload"
            class="upload-demo"
            action="#"
            :limit="1"
            style="display: none"
            id="upload"
            name='upload'
            :http-request="handleOnChange"
          >
            <el-button size="medium" v-repeatClick></el-button>
          </el-upload>
        </template>
      </el-input>
      <el-select
        v-if="visibleExceltype"
        size="medium"
        v-model="uploadType"
        placeholder="导出格式"
        clearable
        style="width: 150px;margin-left: 10px"
        @change="handleTypeChange"
      >
        <el-option
          v-for="item in uploadExcelValue"
          :key="item.value"
          :label="item.text"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-button v-if="visibleDownload" size="medium" type="primary" v-repeatClick
                 @click="getFilesDownLoad" style="margin-left: 10px">模板文件下载</el-button>
    </div>
    <div style="border: 1px solid #ccc;height:400px;margin-top: 20px;border-radius: 5px;overflow: auto;padding:10px">
      <div style="padding: 5px 5px 0 10px;border-left:5px solid #fff;margin-top:10px" v-for="(item,i) in uploadData" :style="item.level==1?'border-left-color:green':'border-left-color:red'">{{item.message}}</div>
    </div>
  </el-dialog>
</template>

<script>
import {
  workOrderTemplate
} from '@/api/business/waybill'

import { getLog } from '@/api/common'
export default {
  name: 'uploadExcel',
  props:['visible','uploadFun','downFun','title','uploadExcelValue','visibleDownload','visibleExceltype','templateFileType','isDownload'],
  data(){
    return {
      uploadValue:'',
      uploadData:[],
      dialogVisble:false,
      uploadType:'',
      socketIns:null,
      uploadFile:null
    }
  },
  methods:{
    restForm(){
      this.uploadData = []
      this.uploadType = ''
      this.uploadValue = ''
      this.uploadFile = null
      this.$emit('update:visible',false)
      if(this.socketIns){
        this.socketIns.close()
        this.socketIns = null
      }
    },
    //点击上传按钮
    handleUploadWorks(){
      document.querySelectorAll("#upload button")[0].click()
    },
    //类型改变
    handleTypeChange(){
      if(this.uploadFile){
        this.handleOnChange(this.uploadFile)
      }
    },
    //上传
    handleOnChange(file,files){
      if(file.file){ //如果是文件
        this.uploadFile = file
      }
      let form = new FormData()
      if(file.file){
        form.append('excelFile',file.file)
        this.uploadValue = file.file.name
      }else{
        form.append('excelFile',this.uploadFile.file)
        this.uploadValue = this.uploadFile.file.name
      }


      if (!this.isDownload){
        if(!this.uploadType){
          this.$message.error('请先选择导出格式')
          return;
        }
        this.uploadData = [{
          level:1,
          message:"文件正在上传..."
        }]
        this.postDownload(this.uploadFun(this.uploadType),form).then(resp=>{
          this.uploadData.push(
            {
              level:'1',
              message:'文件上传完毕',
            }
          )
        }).catch(e=>{
          this.uploadValue = ''
          this.uploadData.push(
            {
              level:'2',
              message:e.msg,
            },{
              level:'2',
              message:'批量操作完毕！',
            },
          )
        }).finally(()=>{
          this.$refs.upload.uploadFiles = []
        })
      }else{
        this.uploadData = [{
          level:1,
          message:"文件正在上传..."
        }]
        this.uploadFun(form).then(resp=>{
          this.uploadData.push({
            level:'1',
            message:'文件上传完毕',
          })
          if(this.title === '根据单号打印运单'){
            this.$emit('printOrder',resp.data,this.uploadType)
          }
        }).catch(e=>{
          this.uploadValue = ''
          this.uploadData.push(
            {
              level:'2',
              message:e.msg,
            },{
              level:'2',
              message:'批量操作完毕！',
            },
          )
        }).finally(()=>{
          this.$refs.upload.uploadFiles = []
        })
      }
    },
    //下载模板
    getFilesDownLoad() {
      this.postDownload(workOrderTemplate(this.templateFileType),{},'get')
    },
  },
  watch:{
    visible(){
      this.dialogVisble = this.visible
      if(this.dialogVisble){
        console.log('打开链接')
        if(this.title === '批量添加修改运单' || this.title === '批量修改状态与分批' || this.title === '匹配身份证'  || this.title === '根据单号导出身份证' || this.title === '根据单号导出运单'){
          this.socketIns = new WebSocket(getLog())
          this.socketIns.onmessage = (ev)=>{
            this.uploadData.push(JSON.parse(ev.data))
          }
        }
      }
    },
  }
}
</script>

<style scoped>

</style>
